<template>
  <!-- 柱状图 -->
  <div class="chart-container" :style="position">
      <!-- <div :id="id" class="chart-main">
      </div> -->
      <div :id="id" class="chart-main" style="position: absolute; ">
        <div>
        <iframe 
        name="ifrmname"
        src="http://pic.qigou.top/dom-pictorialBar-dotted.html" 
        style="width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden;"
        frameborder="0"
        ></iframe>
        </div>
        <!-- <img src="http://pic.qigou.top/image/Harden.jpg" alt="" ondragstart="return false;" /> -->
      </div>
      <i class="i_tl"></i>
      <i class="i_tr"></i>
      <i class="i_bl"></i>
      <i class="i_br"></i>
  </div>
  
</template>

<script>

import * as echarts from 'echarts';
import {onMounted, watch,} from 'vue'
export default {
  name:'BarChart',
  props:{
    data:{
      default:'通过info实现长度改变图表跟着改变'
    },
    info: {
      type: Object,
      default: () => ({})
    },
    boxPosition:{
      type:Object,
      default:()=>{}
    }
  },
  setup(props){
    const id = 'bar-main'+Number(Math.random()*100).toFixed(4)
    const position = `left:${props.boxPosition?.left}px;top:${props.boxPosition?.top}px;`

  watch(
    () => props.info?.size,
    () => {
      // window.open(document.all.ifrmname.src,'ifrmname','')
      // console.log(props.info.size.height); 
      let boxWidth = props.info.size.width * 100 / 100
      let boxHeight = props.info.size.height * 100 /100
      let div = document.getElementsByClassName('chart-container')
      div[0].style.width = boxWidth + "px";
      div[0].style.height = boxHeight + "px";
      console.log(div);

      // document.getElementsByTagName('iframe')
      console.log(boxWidth.toFixed(2),boxHeight.toFixed(2));
      
      },
      { deep: true,}
    );
    return{
      id,
      position,
    }
  }
}
</script>

<style lang="scss">
.chart-container{
  width: 100%;
  height: 100%;
    position: absolute;
    z-index: 99999;
    left: 0px;
    top: 0px;//暂时，需改为动态数据
    background-color: rgba($color: #071c55, $alpha: 0.5);
  i{
    width: 20px;
    height: 20px;
    position: absolute;
    // display: block;
  }
  .i_tl{
    top: 0;
    left: 0;
    background: url('../../assets/images/useimages/tl.png') no-repeat left top;
  }
  .i_tr{
    top: 0;
    right: 0;
    background: url('../../assets/images/useimages/tr.png') no-repeat right 1px;
  }
  .i_bl{
    bottom: 0;
    left: 0;
    background: url('../../assets/images/useimages/bl.png') no-repeat left bottom;
  }
  .i_br{
    bottom: 0;
    right: 0;
    background: url('../../assets/images/useimages/br.png') no-repeat right bottom;
  }
  }
  .chart-main{
    width: 100%;
    height: 100%;
  }
</style>